<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta th:replace="commom/head.html">	
	<link rel="stylesheet" th:href="@{/static/layui/css/layui.css?v=1.0.1}" media="all">
	
	<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
	<!--[if lt IE 9]>
		<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
		<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
	<![endif]-->
</head>

<style type="text/css">
iframe {
	margin: 0;
	border-style: none;
	width: 100%;
	height: 100%;
}
</style>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<!-- 头部区域（可配合layui已有的水平导航） -->
		<div class="layui-header">
			<div class="layui-logo">SpringBoot Redis管理系统</div>
			<ul class="layui-nav layui-layout-left">
				<li class="layui-nav-item lay-flexible" lay-unselect>
					<a href="javascript:;" lay-event="flexible" title="侧边伸缩">
						<i class="layui-icon layui-icon-shrink-right" id="LAY_app_flexible"></i>
					</a>
				</li>
				<li class="layui-nav-item" lay-unselect>
					<a href="javascript:;" layadmin-event="refresh" title="刷新">
						<i class="layui-icon layui-icon-refresh-3"></i>
					</a>
				</li>
			</ul>
			<ul class="layui-nav layui-layout-right" lay-filter="layadmin-layout-right">
				<li class="layui-nav-item" lay-unselect>
					<a lay-href="app/message/index.html" layadmin-event="message" lay-text="消息中心">
						<i class="layui-icon layui-icon-notice"></i>
						<!-- 如果有新消息，则显示小圆点 -->
						<span class="layui-badge-dot" th:if="${unreadMessage}" th:text="@{${unreadMessage}}"></span>
					</a>
				</li>
				<li class="layui-nav-item layui-hide-xs" lay-unselect>
					<a href="javascript:;" layadmin-event="theme">
						<i class="layui-icon layui-icon-theme"></i>
					</a>
				</li>
				<li class="layui-nav-item layui-hide-xs" lay-unselect>
					<a href="javascript:;" layadmin-event="note"> 
						<i class="layui-icon layui-icon-note"></i>
					</a>
				</li>
				<li class="layui-nav-item layui-hide-xs" lay-unselect>
					<a href="javascript:;" layadmin-event="fullscreen">
						<i class="layui-icon layui-icon-screen-full"></i>
					</a>
				</li>
				<li class="layui-nav-item">
					<a href="javascript:;">
						<img src="http://t.cn/RCzsdCq" class="layui-nav-img"> 独泪了无痕
					</a>
					<dl class="layui-nav-child">
						<dd>
							<a onclick="dialogOpen('基本资料','https://www.baidu.com')">基本资料</a>
						</dd>
						<hr>
						<dd><a lay-filter="logout">退出</a></dd>
					</dl>
				</li>
				<li class="layui-nav-item layui-hide-xs" lay-unselect>
					<a href="javascript:;" layadmin-event="about">
						<i class="layui-icon layui-icon-more-vertical"></i>
					</a>
				</li>
				<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-unselect>
					<a href="javascript:;" layadmin-event="more"><i class="layui-icon layui-icon-more-vertical"></i></a>
				</li>
			</ul>
		</div>
		
		<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
		<div class="layui-side layui-bg-black layui-side-menu">
			<div class="layui-side-scroll">
				<ul class="layui-nav layui-nav-tree" lay-shrink="all" lay-filter="springBoot-redis-side-menu">
					<li data-name="home" class="layui-nav-item layui-nav-itemed">
						<a href="javascript:;" lay-tips="主页" lay-direction="2">
							<i class="layui-icon layui-icon-home">主页</i>
							<cite></cite>
						</a>
						<dl class="layui-nav-child" data-name="console" >
							<dd class="layui-this">
								<a data-href="redis/console" data-id="0"> 控制台</a>
							</dd>
							<dd>
								<a data-href="redis/redisMonitor" data-id="1">控制台二</a>
							</dd>
							<dd>
								<a data-href="" data-id="2">控制台三</a>
							</dd>
						</dl>
					</li>
				</ul>
			</div>
		</div>
		
		<!-- 内容主体区域 -->
		<div class="layui-body">
			<div class="layui-tab" lay-allowClose="true" lay-filter="springBoot-redis-tab">
				<ul class="layui-tab-title">
					<li class="home">
						<i class="layui-icon">&#xe68e;</i>&emsp;我的桌面
					</li>
				</ul>
				<div class="layui-tab-content">
					<div class="layui-tab-item layui-show">
						<iframe src='redis/console'></iframe>
					</div>
				</div>
			</div> 
		</div>
		
		<!-- 底部固定区域 -->
		<div class="layui-footer">
			代码成就万世基积沙镇海，梦想永在凌云意意气风发。
		</div>
		
		<!-- 辅助元素，一般用于移动设备下遮罩 -->
		<div class="layadmin-body-shade" layadmin-event="shade"></div>
	</div>
	
	<script th:src="@{/static/layui/layui.js?v=1.0.1}" charset="utf-8"></script>
	<script th:src="@{/static/layui/layuiUtils.js?v=1.0.1}" charset="utf-8"></script>
	<script th:src="@{/static/lib/extJavascript.js?v=1.0.1}" charset="utf-8"></script>
</body>

	<script th:src="@{/static/js/jquery.min.js}"></script>
	<script type="text/javascript">
		frameWH();
		layui.use(['layer', 'table','element'],function(){
			var i = layui.$;
			var layer = layui.layer; // 弹层
			var table = layui.table; // 表格
			var element = layui.element;// 常用元素操作
			var tree = layui.tree; // 树结构
			var jquery = layui.jquery;// DOM库（第三方）
			
			table.init('infoTable', {
				cellMinWidth: 20,
				page:true
			});
			
			table.init('logTable', {
				cellMinWidth: 30,
				page:true
			});
			
			var tabID = "springBoot-redis-tab";
			
			$(".home .layui-icon").eq(1).remove();
			
			//监听导航点击
			element.on('nav(springBoot-redis-side-menu)', function(elem){
				var childHtml = elem.attr("data-href");//获取当前点击的路径
				var childId = elem.attr("data-id");
				
				if(dllwh.isNullOrEmpty(childHtml)){
					return;	
				}
				/**
				 *判断右侧.layui-tab-title属性下的有lay-id属性的li的数目，即已经打开的tab项数目
				 */
				if ($(".layui-tab-title li[lay-id]").length <= 0) {
					// 如果比零小，则直接打开新的tab项
					tab.tabAdd(elem.text(),childHtml,childId);
					tab.tabChange(childId);
					return;
				} 
				
				
				/**
				 * 判断该tab项是否以及存在
				 */
				//初始化一个标志，为false说明未打开该tab项 为true则说明已有
				var isExist = false;  
				var isRefresh = false;
				
				$.each($(".layui-tab-title li[lay-id]"), function () {
					// 如果点击左侧菜单栏所传入的id 在右侧tab项中的lay-id属性可以找到，则说明该tab项已经打开
					if ($(this).attr("lay-id") == childId) {
						tab.tabChange(childId);
						isExist = true;
						event.stopPropagation();
					}
				});
				
				if(!isExist){
					tab.tabAdd(elem.text(),childHtml,childId);
				}
				
				/**
				 * 最后不管是否新增tab，最后都转到要打开的选项页面上
				 */ 
				tab.tabChange(childId);
				
				event.stopPropagation();
			});
			
			element.on('tabDelete('+tabID+')', function(data){
				if(data.index == 0){
					return;
				}
			});
			
			element.on('nav(logout)', function(elem){
				layer.msg(elem.text());
			});
			
			
			// 触发事件
			var tab = {
				// 新增一个Tab项
				// 传入三个参数，分别对应其标题，tab页面的地址，还有一个规定的id，是标签中data-id的属性值
				tabAdd: function(title, url, id) { 
					var content = '<iframe tab-id="'+id+'" frameborder="0" src="'+url+'" scrolling="auto"'
						+' frameborder="0" style="width:100%;height:99%;"></iframe>'
					element.tabAdd(tabID, {
						title: title, 
						content: content,
						id: id
					});
					customRightClick(id); 
					frameWH();  
					$(".home .layui-icon").eq(1).remove();
				},
				tabDelete: function(id) { // 删除指定Tab项
					element.tabDelete(tabID, id);
					$(this).addClass('layui-btn-disabled');
				},
				tabChange: function(id) {// 切换到指定Tab项
					//根据传入的id传入到指定的tab项
					element.tabChange(tabID, id);
				},
				tabDeleteAll: function (ids) {//删除所有
					$.each(ids, function (i,item) {
						if( item != 0 ){
							element.tabDelete(tabID, item); //ids是一个数组，里面存放了多个id，调用tabDelete方法分别删除
						}	
					});
				}
			};
		});
		
		//给tab绑定右击事件
		function customRightClick(id) {
			// 取消右键  rightmenu属性开始是隐藏的 ，当右击的时候显示，左击的时候隐藏
			$('.layui-tab-title li').on('contextmenu', function () { 
				return false; 
			});
		}
	
		
		//计算ifram层的大小
		function frameWH() {
			var h = $(window).height();
			$("iframe").css("height",h+"px");
		}
		
		$(window).resize(function () {
			frameWH();
		});
	</script>
</html>